<!DOCTYPE html>
<html>
<head>
	<title>新建照片忆书</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="yes" name="apple-touch-fullscreen">
	<meta content="telephone=no,email=no" name="format-detection">

	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/normalize.css" type="text/css">
	<link rel="stylesheet" type="text/css" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/photoBottom.css">
	<link rel="stylesheet" type="text/css" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/photo_book1.css">
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/jisuan.js"></script>
	<style type="text/css">
		.am-animation-fade {
			-webkit-animation-name: am-fade;
			animation-name: am-fade;
			-webkit-animation-duration: 0.8s;
			animation-duration: 0.8s;
			-webkit-animation-timing-function: linear;
			animation-timing-function: linear;
		}
		.am-g {
			margin: 0 auto;
			width: 100%;
		}
		/* 提示框 */
		.wst-msg-modal {
			display: none;
			position: fixed;
			bottom: 65px;
			z-index: 9999;
			text-align: center;
		}
		.wst-modal-content {
			display: inline-block;
			max-width: 90%;
			background-color: rgba(0, 0, 0, .7);
			color: white;
			border-radius: 10px;
			padding: 10px;
		}
	</style>
</head>
<body>
	<div class="zhen">
		<div class="zhenzhao"></div>
		<div class="zhen_container">
			<div class="delete">
				<div class="delete_nav">
					<div class="nav_top">实物展示</div>
					<div class="weishu">微信书／微博书／空间书装帧通用</div>
				</div>
				<div class="delete_img"><img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_close_icon.png"></div>
			</div>
			<div class="pattern">
				<div class="wei_zhao">
					<div class="wei padding_left">微信书</div>
					<div class="zhao">照片书</div>
				</div>
				<div class="taozhuang">
					<div class="taozhuang_mian taozhuang_mian1" style="display: block;">
						<div class="zhuang_type">
							<div class="zhuang_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_ruanpi_icon.png" style="width:2.933333rem;height:0.8rem;"></div>
							<div class="text_img">
								<div class="write_text">【产品名字】：微信书·忆书
								</div>
								<div class="write_text">【产品材质】：封皮250g铜版纸覆膜，胶装对裱工艺，内页157g哑粉纸
								</div>
								<div class="write_text">
								【产品尺寸】：A5（210mm*148mm）
								</div>
								<div class="write_text">
								【产品数量】：80～220页（无数张照片）
								</div>
								<div class="write_text">
								【封皮价格】：A4/A5免费
								</div>
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_ruanpi_photo_book_photo.png">
							</div>
						</div>
						<div class="zhuang_type">
							<div class="zhuang_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_yinpi_icon.png" style="width:2.933333rem;height:0.8rem;"></div>
							<div class="text_img">
								<div class="write_text">【产品名字】：微信书·忆书
								</div>
								<div class="write_text">【产品材质】：封皮硬皮精装覆膜，胶装对裱工艺内页157g哑粉纸
								</div>
								<div class="write_text">
								【产品尺寸】：A5（210mm*148mm）
								</div>
								<div class="write_text">
								【产品数量】：80～220页（无数张照片）
								</div>
								<div class="write_text">
								【封皮价格】：A5¥38.00元/A4¥58.00元
								</div>
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_hardcover_wxbook.png">
							</div>
						</div>
						<!-- <div class="zhuang_type">
							<div class="zhuang_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_pihui_icon.png" style="width:2.933333rem;height:0.8rem;"></div>
							<div class="text_img">
								<div class="write_text">【产品名字】：微信书·忆书
								</div>
								<div class="write_text">【产品材质】：封皮采用皮革材质，奢华且保存性强，质感十足，胶装对裱工艺，内页120g特种纸
								</div>
								<div class="write_text">
								【产品尺寸】：A5/A4
								</div>
								<div class="write_text">
								【产品数量】：60～220页（无数张照片）
								</div>
								<div class="write_text">
								【封皮价格】：A5¥58.00元／A4¥88.00元
								</div>
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_skin_painted.png">
							</div>
						</div> -->
						<div class="zhuang_type">
							<div class="zhuang_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/typographic_style1_icon.png" style="/*width:2.933333rem;*/height:0.8rem;"></div>
							<div class="text_img">
								<div class="write_text">
								【产品尺寸】：A5（210mm*148mm）
								</div>
								<div class="write_text">
								【封面排版样式】：多种选择，可以自定义封面
								</div>								
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/typographic_style1.png">
							</div>
							<div class="text_img">
								<div class="write_text">
								【产品尺寸】：A5（210mm*148mm）
								</div>
								<div class="write_text">
								【手机尺寸】：iPhone6
								</div>								
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/typographic_style2.png">
							</div>
							<div class="text_img">
								<div class="write_text">
								【产品尺寸】：A4（285mm*210mm）
								</div>
								<div class="write_text">
								【手机尺寸】：iPhone6
								</div>								
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/typographic_style3.png">
							</div>
						</div>
					</div>
					<div class="taozhuang_mian taozhuang_mian2" style="display: none;">
						<div class="zhuang_type">
							<div class="zhuang_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_ruanpi_icon.png" style="width:2.933333rem;height:0.8rem;"></div>
							<div class="text_img">
								<div class="write_text">【产品名字】：照片书·忆书
								</div>
								<div class="write_text">【产品材质】：封皮250g铜版纸覆膜，胶装对裱工艺，内页157g哑粉纸
								</div>
								<div class="write_text">
								【产品尺寸】：A5（210mm*148mm）
								</div>
								<div class="write_text">
								【产品数量】：80～220页（无数张照片）
								</div>
								<div class="write_text">
								【封皮价格】：A4/A5免费
								</div>
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_ruanpi_photo_book.png">
							</div>
						</div>
						<div class="zhuang_type">
							<div class="zhuang_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_yinpi_icon.png" style="width:2.933333rem;height:0.8rem;"></div>
							<div class="text_img">
								<div class="write_text">【产品名字】：照片书·忆书
								</div>
								<div class="write_text">【产品材质】：封皮采用硬皮精装覆膜，胶装对裱工艺内页157g哑粉纸
								</div>
								<div class="write_text">
								【产品尺寸】：A5（210mm*148mm）
								</div>
								<div class="write_text">
								【产品数量】：80～220页（无数张照片）
								</div>
								<div class="write_text">
								【封皮价格】：A5¥38.00元/A4¥58.00元
								</div>
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_ruanpi_weixins_photo_book_photo.png">
							</div>
						</div>
						<!-- <div class="zhuang_type">
							<div class="zhuang_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_pihui_icon.png" style="width:2.933333rem;height:0.8rem;"></div>
							<div class="text_img">
								<div class="write_text">【产品名字】：照片书·忆书
								</div>
								<div class="write_text">【产品材质】：封皮采用皮革材质，奢华且保存性强，质感十足，胶装对裱工艺，内页120g特种纸
								</div>
								<div class="write_text">
								【产品尺寸】：A4（285mm*210mm）
								</div>
								<div class="write_text">
								【产品数量】：60～220页（无数张照片）
								</div>
								<div class="write_text">
								【封皮价格】：A5¥58.00元／A4¥88.00元
								</div>
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_skin_painted_photo_book.png">
							</div>
						</div> -->
						<div class="zhuang_type">
							<div class="zhuang_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_hanshi_icon.png" style="width:2.933333rem;height:0.8rem;"></div>
							<div class="text_img">
								<div class="write_text">【产品名字】：照片书·忆书
								</div>
								<div class="write_text">【产品材质】：封皮采用硬皮精装覆膜，奢华且保存性强，质感十足，胶装对裱工艺，内页蝴蝶韩式无缝装，特种厚纸裱水蜡保护，照片书专属
								</div>
								<div class="write_text">
								【产品尺寸】：A4（285mm*210mm）
								</div>
								<div class="write_text">
								【产品数量】：35页/70面（无数张照片）
								</div>
								<div class="write_text">
								【整本价格】：A5¥199.00元／A4¥299.00元
								</div>
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_korea_seamless_photobook.png">
							</div>
						</div>
						<div class="zhuang_type">
							<div class="zhuang_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/insidePageStyle_icon.png" style="width:2.933333rem;height:0.8rem;"></div>
							<div class="text_img">
								<div class="write_text">
								【产品尺寸】：A5/A4
								</div>
								<div class="write_text">
								【手机尺寸】：iPhone6
								</div>
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_skin_painted_photo_book.png">
							</div>
							<div class="text_img">
								<div class="write_text">
								【产品尺寸】：A5
								</div>
								<div class="write_text">
								【排版样式】：个性化排版，不同的页脚风格可选，内页120g特种纸
								</div>
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_styles_photobook.png">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<!-- <div class="zhezhao">
			<div class="zhebck"></div>
			<div class="dianji"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_first_time_guide_icon.png" class="img">
			</div>
			<div class="shou"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_first_time_guide_gesture_icon.png" class="img">
			</div>
		</div> -->
		<div class="mian">
			<div class="bookName">
				<span class="bookName_img"><img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 27 Copy 4.png"></span>
				<span class="bookName_text">作品书名</span>
			</div>
			<div class="bookInput">
				<div class="book_input">
					<input type="text" maxlength="9" class="baobao" placeholder="请输入作品照片书书名" id="bookName">
				</div>
			</div>
			<div class="xiangce">
				<div class="xiang_left left"></div>
				<div class="xiang_right right">
					<span class="xiang_one">个性纪念册</span>
					<div class="miaoshu">每本相册可印 20 ～ 60 页，个性的封面<br>与精致的装帧，总一款适合你
					</div>
					<span class="xiang_one xiang_color">查看不同装帧样式及价格</span>
				</div>
			</div>
		</div>
		<div class="new_photo" onclick="addPhotoBook()">
			<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_first_time_new_photo_book_btn_nor.png" class="img">
		</div>
		<!-- <div class="footer">
			<ul class="footer_ul">
				<li class="footer_li left">
					<a href="" class="a">
					<div class="footer_img"><img  class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 40.png"></div>
					<span class="footer_text">点击编辑</span>
					</a>
				</li>
				<li class="footer_li left">
					<a href="" class="a">
					<div class="footer_img"><img  class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Path.png"></div>
					<span class="footer_text footer_color">我的</span>
					</a>
				</li>
				<li class="footer_li left">
					<a href="" class="a">
					<div class="footer_img"><img  class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 14.png"></div>
					<span class="footer_text">购买</span>
					</a>
				</li>
			</ul>
		</div> -->
	</div>
	<div class="am-g wst-msg-modal" id="wst-msg-modal">
		<div class="wst-modal-content" id="wst-modal-content"></div>
	</div>
	<div class="wst-to-top" id="toTop">
		<i class="am-icon-arrow-up wst-to-top-icon"></i>
	</div>
	<include file="./Apps/WebApp/View/default/common_js.html" />
	<script>
	$(function(){
		//装帧切换
		$('.wei').click(function(){
			$(this).addClass('padding_left').siblings().removeClass('padding_left');
			$('.taozhuang_mian1').css('display','block').siblings().css('display','none');
		})
		$('.zhao').click(function(){
			$(this).addClass('padding_left').siblings().removeClass('padding_left');
			$('.taozhuang_mian2').css('display','block').siblings().css('display','none');
		})

		//装帧隐藏
		$('.delete_img').click(function(){
			$('.zhen').css('display','none');
			$('.main').css('display','block');
		})
		//装帧显示
		$('.xiang_color').click(function(){
			$('.zhen').css('display','block');
		$('.main').css('display','none');
		})
	})

	function addPhotoBook(){
		var bookName=$('#bookName').val();
		if(bookName==''){
			wstMsg('请输入书名');
			return;
		}
		$.post(Think.U('WebApp/PhotoBooks/firstInsert'), {'bookName': bookName}, function(data){
			//alert(JSON.stringify(data));
			if(data.status==1){
				location.href= WST.U('WebApp/PhotoBooks/chooseModel','photoBookId='+data.bookId);
			}else{
				wstMsg(data.msg);
			}
		});
	}
	</script>
</body>
</html>